<template>
  <div style="padding: 10px">
    <el-card>
      <div style="display: flex; margin: 10px 0">
        <div style="width: 300px">
          <el-image :src="goodsPlus.img" :preview-src-list="[goodsPlus.img]" style="width: 100%;"></el-image>
        </div>
        <div style="flex: 1; padding-left: 50px">
          <div class="item1"><h3>{{ goodsPlus.name }}</h3></div>
          <div class="item1" style="font-size: 14px">{{ goodsPlus.description }}</div>
          <div class="item1" style="color: orangered">价格 ¥ {{ goodsPlus.price }}</div>
          <div class="item1" style="">库存 {{ goodsPlus.store }}
            <span style="margin-left: 10px">{{ goodsPlus.unit }}</span></div>
          <div class="item1">
            <el-input-number v-model="form.num" :min="1" :max="100" label="数量"></el-input-number>
            <span style="margin-left: 10px">{{ goodsPlus.unit }}</span>
          </div>
          <div class="item1" style="margin-top: 40px">
            <el-button size="medium" style="background-color: red; color:white;" @click="pay()">
              <i class="el-icon-wallet"></i> 直接购买
            </el-button>
            <el-button size="medium" style="background-color: red; color:white;" @click="addCart">
              <i class="el-icon-shopping-cart-2"></i> 加入购物车
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "CommodityDetail",
  data() {
    return {
      id: this.$route.query.id,
      goodsPlus: {},
      form: {num: 1},
      no: null,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

    }
  },
  created() {
    this.load()
    const currentDate = new Date();
    const formattedDate = currentDate.getFullYear() + (currentDate.getMonth() + 1).toString().padStart(2, '0') + currentDate.getDate().toString().padStart(2, '0');
    const currentTimeMillis = currentDate.getTime();
    this.no = formattedDate + currentTimeMillis
    console.log(formattedDate + currentTimeMillis);
  },
  methods: {
    load() {
      this.request.get("/goodsPlus/" + this.id).then(res => {
        this.goodsPlus = res.data
        console.log('this.goodsPlus', this.goodsPlus)
      })
    },
    pay() {
      let data = {name: this.goodsPlus.name, totalPrice: this.goodsPlus.price}
      console.log(data)
      this.request.post("/ordersPlus", data).then(res => {
        if (res.code === "200") {
          this.$message.success("结算成功");
          this.load();
        } else {
          this.$message.error(res.msg);
        }
      })

      window.open(`${this.$baseUrl}/alipay/pay?subject=${this.goodsPlus.name}&traceNo=${this.no}&totalAmount=${this.goodsPlus.price}`);
    },
    addCart() {
      if (!this.user.username) {
        this.$message.warning("请登录后操作")
        return
      }
      // 商品 id
      this.form.goodsId = this.goodsPlus.id
      console.log('this.form', this.form)
      this.request.post("/cart", this.form).then(res => {
        if (res.code === "200") {
          this.$message.success("加入购物车成功")
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.item1 {
  padding: 10px;
  color: #666;
}
</style>